<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>grid瀑布流</title>
    <style>
        body {
            margin: 4px;
            font-family: Helvetica;
            /* Centering & Limit Width */
            margin: auto;
            width: 720px;
        }

        .masonry {
            column-count: 4;
            column-gap: 0;
        }

        .item {
            padding: 4px;
            position: relative;
            counter-increment: item-counter;
        }

        .item img {
            display: block;
            width: 100%;
            height: auto;
        }

        .item::after {
            position: absolute;
            display: block;
            top: 4px;
            left: 4px;
            width: 24px;
            height: 24px;
            text-align: center;
            line-height: 24px;
            background-color: #000;
            color: #fff;
            content: counter(item-counter);
        }
    </style>
</head>
<body>
    <div class="masonry">
        <div class="item">
          <img src="https://picsum.photos/360/460?random=1">
        </div>
        <div class="item">
          <img src="https://picsum.photos/360/520?random=2">
        </div>
        <div class="item">
          <img src="https://picsum.photos/360/420?random=3">
        </div>
        <div class="item">
          <img src="https://picsum.photos/360/420?random=4">
        </div>
        <div class="item">
          <img src="https://picsum.photos/360/480?random=5">
        </div>
        <div class="item">
          <img src="https://picsum.photos/360/500?random=6">
        </div>
        <div class="item">
          <img src="https://picsum.photos/360/500?random=7">
        </div>
        <div class="item">
          <img src="https://picsum.photos/360/400?random=8">
        </div>
        <div class="item">
          <img src="https://picsum.photos/360/440?random=9">
        </div>
        <div class="item">
          <img src="https://picsum.photos/360/420?random=10">
        </div>
        <div class="item">
          <img src="https://picsum.photos/360/500?random=11">
        </div>
        <div class="item">
          <img src="https://picsum.photos/360/460?random=12">
        </div>
        <div class="item">
          <img src="https://picsum.photos/360/480?random=13">
        </div>
        <div class="item">
          <img src="https://picsum.photos/360/440?random=14">
        </div>
        <div class="item">
          <img src="https://picsum.photos/360/420?random=15">
        </div>
    </div>
    <script>
      const arr = ['img1', 'img2', 'img3', 'img4', 'img5', 'img6', 'img7', 'img8', 'img9'];
      const colToRow = (arr, col=3) => {
        arr.map(item => {
          const colIndex = item % col;
           
        })
      }
    </script>
</body>
</html>